<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArXiv Paper Abstract Fetcher</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        #abstractsContainer {
            margin-top: 20px;
        }

        .abstract {
            margin-bottom: 30px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .abstract h3 {
            margin: 0 0 10px 0;
        }

        .abstract p {
            margin: 0;
        }
    </style>
</head>
<body>
    <h1>ArXiv Paper Abstract Fetcher</h1>
    <div id="abstractsContainer"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetch('/fetch-abstracts')
                .then(response => response.json())
                .then(data => {
                    const abstractsContainer = document.getElementById('abstractsContainer');
                    data.forEach(abstract => {
                        const abstractDiv = document.createElement('div');
                        abstractDiv.className = 'abstract';
                        const title = document.createElement('h3');
                        title.textContent = abstract.title;
                        const content = document.createElement('p');
                        content.textContent = abstract.content;
                        abstractDiv.appendChild(title);
                        abstractDiv.appendChild(content);
                        abstractsContainer.appendChild(abstractDiv);
                    });
                })
                .catch(error => {
                    console.error('Error fetching abstracts:', error);
                    const errorMessage = document.createElement('p');
                    errorMessage.textContent = 'Error fetching abstracts. Please try again later.';
                    document.getElementById('abstractsContainer').appendChild(errorMessage);
                });
        });
    </script>
</body>
</html>
